<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Screen too small!</title>
  <style>
    .body {
      position: fixed;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: 48px;
      color: darkgreen;
      background: #d7ffd7;
    }

    .body div {
      font-size: 14px;
      color: #ccc;
    }

    .small {
      background: #ffe4d4;
      font-size: 32px;
      display: none;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      position: fixed;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      color: orangered;
    }

    .small span {
      color: #999;
      font-size: 12px;
      margin: 0px 10px;
    }

    /* ✨✨核心点: 通过media媒体查询, 不同屏幕大小下, 通过display控制元素的显示 */
    /* 或隐藏, 来展现出对应的页面效果... */
    @media (max-width: 500px) {
      .body {
        display: none;
      }

      .small {
        display: flex;
      }
    }

    @media (max-height: 600px) {
      .body {
        display: none;
      }

      .small {
        display: flex;
      }
    }
  </style>
</head>

<body>
  <div class="body">
    正常页面
    <div>可尝试缩小窗口或手机打开</div>
  </div>
  <div class="small">
    你的<span>屏幕</span>太小了
  </div>
</body>

</html>